博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序-----上传图片
阅读量:4314 次
发布时间:2019-06-06

本文共 3782 字,大约阅读时间需要 12 分钟。

page {  background: #f3f3f3;  height: 100%;}.tos{  height: 100vh;}.upload {  width: 100%;  /* height: 320rpx; */  background: rgb(255, 255, 255);  margin-bottom: 10rpx;}.flex {  display: flex;}.nos{  overflow: hidden;  height: 1000rpx;}.up-pic {  /* padding:20rpx 24rpx; */  width: 100%;  justify-content: center;}/* .ap-box{  float: left;} */.pic-box {  padding-top: 26rpx;  flex-flow: wrap;  width: 710rpx;  margin: 0 auto;  display: flex;  justify-content: space-between;}.ap-box {  position: relative;  margin-bottom: 10rpx;}.add-pics {  width: 360rpx;  height: 190rpx;  /* margin-right: 20rpx; */  margin: 0 auto;  position: relative;  text-align: center;  border: 1rpx dashed rgb(153, 153, 153);  /* margin-top: 30rpx;  margin-bottom: 40rpx; */}.add-pic {  width: 230rpx;  height: 180rpx;  /* margin-right: 20rpx; */  position: relative;  /* margin: 20rpx 30rpx 20rpx 30rpx; */}.img {  width: 44rpx;  height: 44rpx;}.imgs {  width: 100rpx;  height: 83rpx;  margin-top: 30rpx;}.p-v {  font-size: 28rpx;  color: rgb(51, 51, 51);  margin-top: 10rpx;  /* padding-bottom: 30rpx; */}/* 删除图片 */.img-de {  width: 45rpx;  height: 45rpx;  border-radius: 50%;  position: absolute;  right: 6rpx;  top: 6rpx;}.hong-contant .teamwork-btn {  width: 360rpx;  height: 88rpx;  border-radius: 50rpx;  color: white;  background-color: #14a1fd;  margin: 0 auto;  margin-top: 80rpx;  margin-bottom: 40rpx;}

 

点击上传照片
// pages/release/release.js
var app = getApp();
var eapi = getApp().url;
var images = []
Page({
/**
* 页面的初始数据
*/
data: {
imgbox: [], //上传图片,
},
// 删除照片 &&
imgDelete1: function(e) {
console.log(1);
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.images;
console.log(index);
// console.log(imgbox);
imgbox.splice(index, 1)
// console.log(imgbox);
images = imgbox;
that.setData({
images: imgbox
});
},
addPic1: function(e) {
if (images.length>=3){
console.log('限制上传3张图片')
return false
}
var imgbox = this.data.imgbox;
console.log(imgbox)
var picid = e.currentTarget.dataset.pic;
console.log(picid)
var that = this;
var n = 3;
if (3 > imgbox.length > 0) {
n = 3 - imgbox.length;
} else if (imgbox.length == 3) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图
console.log(res)
for (var i = 0; i < res.tempFilePaths.length; i++) {
console.log(i)
wx.uploadFile({
header: {
'Content-Type': 'application/json'
},
url: "http://192.168.3.182" + '/v1/api/img',
filePath: res.tempFilePaths[i],
name: 'img',
formData: {
'img': res.tempFilePaths[i],
// id: id
},
success: function(res) {
console.log(res)
that.setData({
img: JSON.parse(res.data).data
})
images.push(JSON.parse(res.data).data)
// console.warn('数组图片');
console.log(images)
that.setData({
images: images
})
var data = res.data
that.onLoad()
},
fail: function(rs) {
console.log(res)
}
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})

 

转载于:https://www.cnblogs.com/wangshishuai/p/9935817.html

你可能感兴趣的文章
CentOS7 重置root密码
查看>>
Centos安装Python3
查看>>
PHP批量插入
查看>>
laravel连接sql server 2008
查看>>
Laravel框架学习笔记之任务调度(定时任务)
查看>>
Swagger在Laravel项目中的使用
查看>>
Laravel 的生命周期
查看>>
Nginx
查看>>
Navicat远程连接云主机数据库
查看>>
Nginx配置文件nginx.conf中文详解(总结)
查看>>
jxl写入excel实现数据导出功能
查看>>
linux文件目录类命令|--cp指令
查看>>
.net MVC 404错误解决方法
查看>>
linux系统目录结构
查看>>
git
查看>>
btn按钮之间事件相互调用
查看>>
Entity Framework 4.3.1 级联删除
查看>>
codevs 1163:访问艺术馆
查看>>
冲刺Noip2017模拟赛3 解题报告——五十岚芒果酱
查看>>
并查集
查看>>